<template>
  <div style="width:100%;height:100%;">
    <transition mode="out-in" :name="transitionName">
      <keep-alive :include="cachedViews">
        <router-view :key="key" class="Router" />
      </keep-alive>
    </transition>
    <van-tabbar v-if="falg&&list.length!==0" v-model="active" :safe-area-inset-bottom="true">
      <van-tabbar-item v-for="(item,index) in list" :key="index" :icon="item.icon" @click="goTo(item)">{{ item.name }}</van-tabbar-item>

    </van-tabbar>
    <Load v-show="$store.state.user.LOADING" />
  </div>
</template>

<script >
import Vue from 'vue'
import { Tabbar, TabbarItem, Toast } from 'vant'
// import toast from 'gdt-jsapi/toast'

Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Toast)

export default {
  components: {
    // Load:Load v-show="$store.state.user.LOADING"
    Load: () => import('./Load')
  },
  data() {
    return {
      transitionName: '',
      active: 0,
      from: '',

      falg: true
    }
  },
  computed: {
    cachedViews() {
      return this.$store.state.user.cachedViews
    },
    key() {
      return this.$route.path
    },
    userRole() {
      return this.$store.state.distanceInfo.userRole
    },
    list() {
      if (this.$store.state.user.show) {
        return [{
          icon: 'home-o',
          name: '隔离点',
          url: '/chiooceDistance'
        },
        {
          icon: 'friends-o',
          name: '人员管理',
          url: '/permission/permission'
        },
        {
          icon: 'bar-chart-o',
          name: '统计',
          url: '/source/index'
        },
        {
          icon: 'contact',
          name: '隔离人员',
          url: '/distance/index',
          refresh: true
        }]
      } else {
        return []
      }
    }

  },
  watch: {
    $route(to, from) {
      // 切换动画
      const isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
      // Toast(to.path)
      if (to.path === '/chiooceDistance') {
        this.active = 0
      }
      this.falg = this.list.filter(item => item.url === to.path).length
      if (to.path === '/source/index') {
        this.falg = false
      }

      if (isBack) {
        this.transitionName = 'slide-left'
      } else {
        this.transitionName = 'slide-right'
      }
      this.$router.isBack = false
    }
  },
  mounted() {

  },
  methods: {
    goTo(arg) {
      if (arg.url === '/permission/permission') {
        this.$store.dispatch('user/showView', 'Permission')
      }
      if (arg.refresh) {
        this.$router.push({ path: arg.url, params: { refresh: true }})
      } else {
        this.$router.push({ path: arg.url })
      }
    }
  }

}
</script>
<style lang="scss" scoped>
 .container {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
    max-width: 15rem;
    margin: auto;
    position: relative;

    .Router {
      position: relative;
      height: 100%;
      transition: all .33s ease;
      top: 0;
      backface-visibility: hidden;
      perspective: 1000;
    }
    .slide-left-enter,
    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter {
      opacity: 1;
      transform: translate3d(100%, 0 ,0);
    }
  }

</style>
